<template>
	<div id="navbar">
		<van-row type="flex" justify="space-between" align='center'>
			
		  <van-col span="21">
			  <form action="/">
			  	<van-search v-model="value" shape='round' placeholder="大家都在搜:来日方长" @click="search"/>
			  </form>
		  </van-col>
		  <van-col span="3" class="moreIcon">
			  <van-icon size="2em" name="apps-o" />
		  </van-col>
		
		</van-row>
	</div>
</template>

<script>
	import Vue from 'vue'
	export default {
	  data() {
	    return {
	      value: '',
	    };
	  },
	  methods: {
	    search(){
			this.$store.commit('homeSearch')
		}
	  },
	};
</script>

<style lang="scss" scoped>
	#navbar{
		background-color: white;
		z-index: 666;
		position: sticky;
		top: 0;
	}
	.van-row{
		padding: 0 0.75rem;
		box-sizing: border-box;
	}
	.van-search{
		padding: 0.625rem 0;
		box-sizing: border-box;
	}
	.van-search__content{
		justify-content: center;
		background-color: #F2F2F2;
		color: black;
		box-shadow: inset 0 0.0625rem 0.0625rem 0 rgb(0 0 0 / 10%)
	}
	.van-field__left-icon .van-icon{
		color: black;
		font-weight: 900;
		font-size: 1.25rem;
	}
	.van-search__action{
		line-height: 0;
	}
	.moreIcon{
		text-align: right;
	}
</style>